<template>
		<view class="wrap">
			<view style="height: 20upx;"></view>
			<u-row gutter="16">
				<u-col span="12" text-align="center">
					<view class="demo-layout bg-purple"  style="height: 200upx;"  @click="cell">
						<image src="../../static/cellpolice/phone.png" class="cell_image" mode=""></image>
						<u-col span="12" text-align="center" >
								<text>一键报警</text>
						</u-col>
					</view>
				</u-col>
			</u-row>
			<view style="height: 50upx;"></view>
			<u-row gutter="16" >
				<u-col span="6" text-align="center" >
					<view class="demo-layout bg-purple box" @click="navigate('/pages/callpolice/students?id=0')" >
						<image src="../../static/cellpolice/phone1.png" class="cell_image"  mode=""></image>
						<u-col span="12" text-align="center">
								<text>随手拍</text>
						</u-col>
					</view>
				</u-col>
				<u-col span="6"text-align="center"> 
					<view class="demo-layout bg-purple box" @click="navigate('/pages/callpolice/students?id=1')">
						<image src="../../static/cellpolice/safe.png" class="cell_image"  mode=""></image>
						<u-col span="12" text-align="center">
								<text>安全隐患</text>
						</u-col>
					</view>
				</u-col>
			</u-row>
			<view style="height: 50upx;"></view>
			<u-row gutter="16">
				<u-col span="6"text-align="center">
					<view class="demo-layout bg-purple box"  @click="navigate('/pages/callpolice/students?id=2')">
						<image src="../../static/cellpolice/zhapian.png" class="cell_image" mode=""></image>
						<u-col span="12" text-align="center">
								<text>诈骗报警</text>
						</u-col>
					</view>
				</u-col>
				<u-col span="6"text-align="center">
					<view class="demo-layout bg-purple box" @click="navigate('/pages/callpolice/students?id=3')">
						<image src="../../static/cellpolice/xingshi.png" class="cell_image" mode=""></image>
						<u-col span="12" text-align="center">
								<text>刑事报警</text>
						</u-col>
					</view>
				</u-col>
			</u-row>
			<view style="height: 50upx;"></view>
			<u-row gutter="16">
				<u-col span="6"text-align="center" @click="navigate('/pages/callpolice/students?id=4')">
					<view class="demo-layout bg-purple" style="height: 220upx;width: 270upx;margin: auto;" >
						<image src="../../static/cellpolice/minshi.png" class="cell_image" mode=""></image>
						<u-col span="12" text-align="center">
								<text>民事报警</text>
						</u-col>
					</view>
				</u-col>
				<u-col span="6"text-align="center">
					<view class="demo-layout bg-purple" style="height: 220upx;width: 270upx;margin: auto;" @click="navigate('/pages/callpolice/history')" >
						<image src="../../static/cellpolice/history.png" class="cell_image" mode=""></image>
						<u-col span="12" text-align="center">
								<text>报警历史</text>
						</u-col>
					</view>
				</u-col>
			</u-row>
			
			
			
		</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			cell(){
				wx.makePhoneCall({
				  phoneNumber: '18367430110' // 仅为示例，并非真实的电话号码
				})
			},
			navigate(path){
				uni.navigateTo({
				    url: path
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
			padding: 24rpx;
			
		}
	
		.u-row {
			margin: 40rpx 0;
		}
	
		.demo-layout {
			height: 80rpx;
			border-radius: 8rpx;
		}
	
		.bg-purple {
			background: #d3dce6;
		}
	
		.bg-purple-light {
			background: #e5e9f2;
		}
	
		.bg-purple-dark {
			background: #99a9bf;
		}
		.box{
			height: 220upx;
			width: 270upx;
			margin: auto;
		}
		.cell_image{
			width: 140upx;
			height: 140upx;
			margin-top: 10upx;
		}
</style>
